<template>
    <div class="bodyWrapper">
        <div class="wrapper-search">
            <div class="search-top">
                <div class="work-type">
                    <el-dropdown>
                    <span class="el-dropdown-link" style="color: #61687C">
                    职位类型<i class="el-icon-class el-icon-caret-bottom" style="margin-left: 7px"></i>
                    </span>
                        <el-dropdown-menu slot="dropdown" class="work-etc">
                            <el-dropdown-item>不限</el-dropdown-item>
                            <el-dropdown-item>高级管理</el-dropdown-item>
                            <el-dropdown-item>技术</el-dropdown-item>
                            <el-dropdown-item>产品</el-dropdown-item>
                            <el-dropdown-item>设计</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class="inner-search">
                    <input type="text" class="inputPoint" placeholder="搜素职位、公司">
                </div>
            </div>
            <div class="search-click">
                <span>搜索</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "searchPoint",
        data(){
            return{

            }
        }
    }
</script>

<style scoped lang="less">
    .bodyWrapper{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
    }
    .wrapper-search{
        width: 935px;
        height: 50px;
        background-color: #FFFFFF;
        margin-top: 58px;
        display: flex;
    }
    .search-top{
        width: 795px;
        height: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }
    .search-top:hover{
        border: #42b983 1px solid;
    }
    .work-type{
        width: 130px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #61687C;
    }
    .work-etc{
        color: #61687C;
        font-size: 13px;
    }
    .el-dropdown-link{
        font-size: 13px;
    }
    .inner-search{
        width: 665px;
        height: 30px;
        line-height: 30px;
    }
    .search-click{
        width: 140px;
        height: 50px;
        background-color: #51dfd0;
        color: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13px;
    }
    .search-click:hover{
        background-color: #70e0d4;
        cursor: pointer;
    }
    .inputPoint{
        width: 100%;
        height: 100%;
        border: none;
    }
    input {
        border: 0;
        outline: none;
        background-color: rgba(0, 0, 0, 0);
    }
    input::-webkit-input-placeholder{
        color: #9FA3AF;
    }
    .inputPoint:hover{
        caret: #8c939d;
    }
</style>